// 这里面存放的就是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

// 第一步：插件安装
Vue.use(Vuex)

// 第二步：创建仓库
const store = new Vuex.Store({
  // 开启严格模式，vuex遵循单项数据流，组件中不允许直接修改仓库中的数据, 上线时关闭，会消耗性能
  strict: true,
  // 通过state提供数据（所有组件共享的数据）
  state: {
    title: '组件大标题',
    count: 10,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  getters: {
    filterTen (state) {
      return state.list.filter(item => item >= 5)
    }
  },
  // 定义mutations
  mutations: {
    // 第一个参数时当前store的state属性
    addCount (state, num) {
      state.count += num
    },
    changeTitle (state, newTitleObj) {
      console.log(newTitleObj.msg)

      state.title = newTitleObj.titles
    },
    reductCount (state, n) {
      state.count -= n
    },
    changeCount (state, newCount) {
      state.count = newCount
    },
    changeTitles (state, newTitle) {
      state.title = newTitle
    }
  },
  // 异步修改数据,不能直接操作state，还是需要commit mutation
  actions: {
    // context 上下文（此处未分模块，可以当成store仓库）
    syncChangeCount (context, n) {
      setTimeout(() => context.commit('changeCount', n), 2000)
    },
    syncChangeTitles (context, newTitle) {
      setTimeout(() => context.commit('changeTitles', newTitle), 1000)
    }
  }
})

// 导出给main.js使用
export default store
